<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>产品详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/layout.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_3mgu42g42easjor.css">
</head>

<body>
<div class="page-group">
    <div class="page">
        <!--搜索栏内容 !-->
        <header class="bar bar-nav  product-bar">
            <a class="icon icon-left pull-left" href="${basepath}/catalog/toCatalogList">返回</a>

            <h1 class="title">商品详情</h1>
        </header>
        <!--内容部分 !-->
        <div class="content product-content">
            <!--列表页面 !-->
            <!-- 幻灯片Slider -->
            <div class="swiper-container" data-space-between='10'>
                <div class="swiper-wrapper">
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- 商品详情 -->
            <div class="product-card card ">
            </div>
            <!-- 促销信息 -->
            <!-- 数量信息 -->
            <div class="please-card card">
                <div class="card-content">
                    <div class="list-block">
                        <ul>
                            <li>
                                <a href="#" class="item-link item-content" id="specBtn">
                                    <div class="item-media"><i class="icon icon-f7"></i></div>
                                    <div class="item-inner">
                                        <div class="item-title"><span class="select-size">选择尺码，</span><span
                                                class="colour">主要颜色</span></div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 数量信息弹出框 -->
            <div class="spec-popup  popup popup-about">
                <div class="ctrl-ui-sku">
                    <div class="sku-pro">
                        <div>
                            <img src="http://img.alicdn.com/imgextra/i4/595412874/TB2MaV.mBNkpuFjy0FaXXbRCVXa_!!595412874.jpg_120x120q50s150.jpg">

                            <div class="sku-pro-info">
                                <div>
                                    <p class="price">￥<span class="pop-price">124</span></p>
                                    <p class="quantity"><label class="label">库存</label>:<span class="pop-stock">2694</span></p>
                                    <#--<p class="sku-txt"><span class="c-sku"></span><span-->
                                            <#--class="unc-sku">请选择: 尺码 颜色分类</span></p>-->
                                </div>
                            </div>
                            <div class="close-popup"><span class="icon iconfont icon-guanbi"></span></div>
                        </div>
                    </div>
                    <div class="sku-info">
                        <#--<div>-->
                            <#--<h2>颜色分类</h2>-->
                            <#--&lt;#&ndash;<ul class="clearfix">&ndash;&gt;-->
                                <#--&lt;#&ndash;<li class="select">S码蓝色</li>&ndash;&gt;-->
                                <#--&lt;#&ndash;<li class="">M码蓝色</li>&ndash;&gt;-->
                                <#--&lt;#&ndash;<li class="">S码蓝色</li>&ndash;&gt;-->
                                <#--&lt;#&ndash;<li class="">M码蓝色</li>&ndash;&gt;-->
                                <#--&lt;#&ndash;<li class="">S码蓝色</li>&ndash;&gt;-->
                                <#--&lt;#&ndash;<li class="">M码蓝色</li>&ndash;&gt;-->
                            <#--&lt;#&ndash;</ul>&ndash;&gt;-->
                        <#--</div>-->
                            <div class="sku-spec">

                            </div>
                        <div>
                            <h2 class="g-num">
                                <span>购买数量</span>
                                <div class="quantity-info">
                                    <a class="btn reduce" min="1" id="sub" href="javascript:void(0);">-</a>
                                    <input type="text" min="1" value="1" id="bookNum">
                                    <a class="btn plus" max="1366">+</a>
                                </div>
                            </h2>
                        </div>
                    </div>
                    <p class="buttons-row p-inner">
                        <a href="#" id="joinCartBtn">加入购物车</a>
                        <a href="#" id="purchaseBtn" class="p-pur not">立即购买</a>
                    </p>
                    <p class="buttons-row p-out">
                        <a href="#" id="confirmJoin">确定</a>
                    </p>
                    <p class="buttons-row p-pur">
                        <a href="#" id="purBuy" data-url="${basepath}/order/toOrderDetailList">立即购买</a>
                    </p>
                </div>
            </div>
            <!-- 标签页 -->
            <div class="buttons-tab">
                <a href="#goodsDet-tab" class="tab-link active button" data-type="p">商品详情</a>
            </div>
            <div class="tabs">
                <div id="goodsDet-tab" class="tab active">
                </div>
            </div>
        </div>
        <nav class="bar bar-tab" id="tool-bar">
            <a class="tab-item external" href="#">
                <span class="icon iconfont icon-shoucang"></span>
                <span class="tab-label">收藏</span>
            </a>
            <a class="tab-item external show-cartList" >
                <span class="icon iconfont icon-gouwuche"></span>
                <span class="tab-label">购物车</span>
            </a>
            <a " class="tab-item" id="joinBtn">加入购物车</a>
            <a href="#" class="tab-item" id="purBtn">立即购买</a>
        </nav>
    </div>
</div>

<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script>$.config={router:false}</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-extend.js' charset='utf-8'></script>
<script type='text/javascript' src="${staticpath}/front/dist/js/productDetails.js"></script>
<script>$.init()</script>


</body>

</html>
